{% extends "mapp/base.html" %}

{% block underheader %}{% endblock %}

{% block content %}
{% if form.errors %}
    {% for error in form.non_field_errors %}
        <div class="alert alert-error">
            <strong>{{ error|escape }}</strong>
        </div>
    {% endfor %}
{% endif %}
<section id="form">
<form action="{% url 'mapp:index' %}"  method="post">{% csrf_token %}
	<section id="sequence">
		<div id="sequence_part" class="label_group">
			{{ form.sequence.label_tag }}
			{% for error in form.sequence.errors %}
	            <div class="alert alert-error">
	                <strong>{{ error|escape }}</strong>
	            </div>
	        {% endfor %}
			{{ form.sequence }}
		</div>
		<div id="mutations_part" class="label_group">
			{{ form.mutations.label_tag }}
			{% for error in form.mutations.errors %}
	            <div class="alert alert-error">
	                <strong>{{ error|escape }}</strong>
	            </div>
	        {% endfor %}
			{{ form.mutations }}
		</div>
		<br>
	</section>
	<h2 class="above_hideable">Sequences selection</h2>
	<section id="sequences_picking" class="hideable">
		<div class="label_group">
			{% for error in form.seqs.errors %}
	            <div class="alert alert-error">
	                <strong>{{ error|escape }}</strong>
	            </div>
	        {% endfor %}
			{{ form.seqs.label_tag }}
			{{ form.seqs }}
		</div>
		<br>
		<div class="label_group">
			{% for error in form.clusters.errors %}
	            <div class="alert alert-error">
	                <strong>{{ error|escape }}</strong>
	            </div>
	        {% endfor %}
			{{ form.clusters.label_tag }}
			{{ form.clusters }}
		</div>
		<br>
	</section>
	<h2 class="above_hideable">Multiple sequence alignment</h2>
	<section id="alignment" class="hideable">
		<div class="label_group">
			{{ form.msa.label_tag }}
			{{ form.msa }}
		</div>
		<br/>
	</section>
	<h2 class="above_hideable">Phylogenetic tree construction</h2>
	<section id="tree" class="hideable">
		<div class="label_group">
			{{ form.tree.label_tag }}
			{{ form.tree }}
		</div>
		<br/>
	</section>
<button type="submit" value="Submit">Submit</button>
<br>
</form>
</section>
{% endblock %}